<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="best" content="Best">
		<title>人脸搜索</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				background: url(https://static.wixstatic.com/media/c2bc9a_fbd48bddd6c74c5d8ec194eb668d04ae~mv2.gif) no-repeat;
				background-size: 100%;
			}

			body {
				display: flex;
				/*弹性布局,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
                       子元素的float、clear和vertical-align属性将失效。http://blog.csdn.net/u011300580/article/details/56011564*/
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.veriface {
				width: 30%;
				height: 55%;
				min-width: 500px;
				min-height: 500px;
				padding: 30px 0px;
				background-color: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				border-radius: 30px;
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(5px);
				box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
				border: 1px solid rgba(255, 255, 255, 0.5);
				border-right: 1px solid rgba(255, 255, 255, 0.2);
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			}

			.veriface .capture {
				display: block;
				width: 80%;
				height: 60%;
				border-radius: 20px;
				background-color: #000;
			}

			.veriface .control {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 80%;
				height: 70px;
			}

			.veriface .control span {
				width: 100px;
				height: 45px;
				background: #F9F9F9;
				text-align: center;
				line-height: 45px;
				color: #222222;
				font-size: 12px;
				border-radius: 8px;
				box-shadow: 0 0 4px #cccccc;
				user-select: none;
				cursor: pointer;
				transition: 1s;
			}


			.veriface h3.notice {
				margin: 10px 0px;
				color: red;
			}

			.draw_img {
				position: fixed;
				bottom: 0px;
				left: 0px;
			}

			body .veriface .recognition {
				background-color: #22d83a;
				color: white;
			}

			.veriface .control .recognition:hover {
				background-color: #1dbe30;
			}

			#uname {
				height: 30px;
				border-radius: 5px;
				border: 1px solid dimgray;
				outline-style: none;
				padding: 0px 10px;
				background-color: rgba(255, 255, 255, 0.7);
			}

			#close {
				background-color: #ff3131;
				color: white;
			}

			#close:hover {
				background-color: #d62929;
				color: white;
			}

			h1 {
				color: white;
			}
		</style>
	</head>
	<body>
		<canvas class="draw_img" width="300" height="200" style="display: none;"></canvas>
		<div class="veriface" style="margin-top: 3px">
			<h1>惠光健康注册页面</h1>
			<br>
			<video class="capture" src=""></video>
			<h3 class="notice">请打开摄像头~</h3>
			<p>
				<b style="color: red;">请输入注册ID：</b><input type="text" pattern="" name="" id="uname" value="" required
					placeholder="由数字,字母下划线组成" />
			</p>
			<div class="control">
				<span class="open">人脸登录</span>
				<span class="recognition">注册人脸</span>
				<span class="close" id="close">打开/关闭</span>
			</div>
		</div>
		<script>
			var open = document.querySelector('.open');
			var capture = document.querySelector('.capture');
			var recognition = document.querySelector('.recognition');
			var uname = document.getElementById('uname')
			var close = document.querySelector('.close');
			var notice = document.querySelector('.notice');
			var canvas = document.querySelector('.draw_img');
			var context = canvas.getContext('2d');
			let inp = document.getElementById('close')
			var buffer;

			open.onclick = function() {
				window.location.href = 'http://localhost:3302/facetwo.html'
			}
			recognition.onclick = screenShot;
			let flag = true;
			close.onclick = function() {
				if (flag) {
					flag = !flag
					invokingCamera();
				} else {
					flag = !flag
					buffer && buffer.getTracks()[0].stop();
					msg('请打开摄像头~', 'red')
				}

			}

			function invokingCamera() {
				if (navigator.mediaDevices.getUserMedia) {

					navigator.mediaDevices.getUserMedia({
						audio: false,
						video: {
							facingMode: "user"
						}
					}).then(

						function(MediaStream) {
							//console.log(stream);
							buffer = MediaStream;
							//console.log(buffer);
							capture.srcObject = MediaStream;
							capture.onloadedmetadata = function(e) {
								capture.play();
								msg('把脸放进来~', '#00557f')
							};
						}
					).catch(
						function(err) {
							console.log(err.name + ": " + err.message);
						}
					);
				} else {
					alert('您的浏览器不支持摄像头');
				}
			}
			let i = 1

			function screenShot() {
				msg('正在检测,请稍后~~~', '#c665ff');
				context.drawImage(capture, 0, 0, 200, 150);
				new Post({
					url: '/adduser',
					data: {
						dataurl: canvas.toDataURL('image/png'),
						userid: uname.value
					},
					success: function(res) {
						console.log(JSON.parse(res));
						res = JSON.parse(res)
						if (res.error_code === 222018) {
							msg('请输入正确ID！！！', "red")
						} else {
							if (res.error_code === 0) {
								msg('ID:' + uname.value + '添加成功~', '#f6ea5c')
							} else {
								msg('添加失败!!!', '#f6ea5c')
							}

						}
					}
				})
			}

			function msg(con, color) {
				notice.innerHTML = con + '';
				notice.style.color = color;
			}


			function Post(opt) {

				this.init(opt);
			}

			Post.prototype = {
				init: function(opt) {
					this.url = opt.url || '';
					this.data = opt.data || {};
					this.method = 'POST';
					this.async = true;
					this.success = opt.success || function() {}
					this.xhr();
				},
				xhr: function() {
					var that = this;
					var xhr = new XMLHttpRequest();
					console.log(this.data)
					xhr.open(this.method, this.url, this.async);
					xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
					xhr.send("data=" + JSON.stringify(this.data));
					xhr.onreadystatechange = function(ev) {
						if (xhr.status === 200 && xhr.readyState === 4) {
							this.success(xhr.response);
						}
					}.bind(this);
				}
			}
			new Post({
				url: '/access1',
				data: '',
			})
		</script>
	</body>
</html>
